<template>
  <div>
    <el-dialog title="添加用户" :visible.sync="dialogVisible" width="70%" :before-close="clearForm" style="margin-left: 80px">
      <!-- 内容区域 -->
      <el-form :model="UserForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="UserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="UserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="UserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="head_img">
          <div class="img-btn">
            <el-button class="btn" type="primary" @click="innerVisibleImg = true">上传图片</el-button>
            <img v-show="UserForm.head_img !== ''" class="img" :src="UserForm.head_img" style="margin-left: 10px" alt="" />
            <div v-show="UserForm.head_img === ''"></div>
          </div>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="UserForm.phone"></el-input>
        </el-form-item>
      </el-form>

      <!-- 弹框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>

      <!-- 2. 内弹框 --- 上传图片 -->
      <el-dialog width="40%" title="上传图片" :visible.sync="innerVisibleImg" append-to-body>
        <UploadImg @sendImg="sendImg" ref="upload" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisibleImg = false">取 消</el-button>
          <el-button type="primary" @click="showImg">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import UploadImg from '../../components/Uploadimg.vue'
export default {
  name: 'FirstProjectAddGoods',
  components: {
    UploadImg
  },
  data() {
    return {
      dialogVisible: false, //外弹框
      innerVisible: false, //内弹框
      innerVisibleImg: false, //图片弹框
      imgUrl: '',
      UserForm: {
        id: '',
        username: '',
        password: '',
        head_img: '',
        email: '',
        phone: ''
      },
      rules: {
        username: [
          { required: true, message: '请用户名', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {},

  methods: {
    sendImg(val) {
      console.log('显示图片的地址', val)
      this.imgUrl = val
    },
    showImg() {
      this.innerVisibleImg = false
      this.UserForm.head_img = this.imgUrl
      //清空图片上传的列表
      this.$refs.upload.fileList = []
    },
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let { username, password, head_img, email, phone } = this.UserForm
          const { data: res } = await this.$http.post('user/add', { username, password, head_img, email, phone })
          if (res.code !== 0) {
            return this.$message.error('新增失败')
          }
          this.$message.success('新增成功')
          this.dialogVisible = false
          this.clearForm()
          this.$refs.ruleForm.resetFields()
          this.$parent.getData()
          this.$parent.getPageTotal()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearForm() {
      this.dialogVisible = false
      this.UserForm = {
        id: '',
        username: '',
        password: '',
        head_img: '',
        email: '',
        phone: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
.img {
  width: 120px;
  height: 120px;
  margin-left: 20px;
}
.img-btn {
  width: 240px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    width: 100px;
    height: 50px;
  }
}
</style>
